<template>
    <div class="login-background">
        <div class="login-wrapper">
            <div class="title">Login</div>
                <div class="form-wrapper">
                    <el-form @submit.enter.prevent="onenter" :model="form">
                        <el-form-item label="用户名">
                            <el-input v-model="form.username" />
                        </el-form-item>
                        <el-form-item label="密码">
            
                        <el-input type="password" v-model="form.password" />
                        </el-form-item>

                        <el-form-item label="邮箱">
                            <el-input v-model="form.email" />
                            <el-button @click="sendVerification">发送验证码</el-button>
                        </el-form-item>
                        <el-form-item label="验证码">
                            <el-input v-model="form.verification" />
                        </el-form-item>
                        <el-form-item>
                            <el-button  type="primary" @click="onSubmit">Log in</el-button>
                        </el-form-item>
                    </el-form>
                </div>
                <div class="msg">
                Don't have account?
                    <router-link to="/register">
                        <el-button>register</el-button>
                    </router-link>
                </div>
            </div>
        
    </div>
    
</template>

<script>
import { reactive } from 'vue'
import axios from 'axios'
import { ElMessage } from 'element-plus';
import router from '../router';
import { useStore } from 'vuex';

export default {
    name: "login",
    setup() {
        //    var carts = new Array();

        // const username = "admin";
        // window.sessionStorage.setItem("username", username);

        // var totalPrice = 0.00;
        var getCode;
        const store = useStore();
        const form = reactive({
            username: "",
            password: "",
            email: "",
            verification: ""
        });
        const onenter = () => {
            console.log("enter");
        }
        const onSubmit = () => {
            console.log("submit");
            return axios.post("/account/login", form).then(res => {
                if (getCode == form.verification) {
                    if (res.data.httpStatus == "OK") {
                        localStorage.setItem("token", res.data.token)

                        window.sessionStorage.setItem("username", res.data.account.username);
                        console.log("this is mark!!!" + window.sessionStorage.getItem('username'));
                        axios.defaults.headers.common["Authorzation"] = res.data.token;
                        console.log(res.data.token);
                        store.commit("setUserInfo", res.data.account)
                        router.push({ path: "/category" });
                        ElMessage({
                            message: res.data.message,
                            type: 'success'
                        });
                        console.log(localStorage.getItem("token"));
                        console.log("redirect");
                    } else {
                        // console.log(res.data.httpStatus);
                        ElMessage({
                            message: res.data.message,
                            type: 'warning'
                        });
                    }
                }
                else {
                    ElMessage({
                        message: res.data.message,
                        type: 'warning'
                    });
                }
            }).catch(e => {
                // console.log(e);
                ElMessage.error(e)
            })
        };
        const sendVerification = function () {
            axios({
                method: "POST",
                url: "account/verification/" + form.email,
                data: {
                    code: ""
                }
            }).then(Response => {
                getCode = Response.data.data;
                console.log(getCode);
            })
        };

        // var username = window.sessionStorage.getItem('username');
        return {
            form,
            onSubmit,
            onenter,
            sendVerification
        }
    }
}
</script>
<style>
        * {
            margin: 0;
            padding: 0;
        }
        html {
            height: 100%;
        }
        body {
            height: 100%;
        }
        .container {
            height: 100%;
        }
        .login-wrapper {
            background-color: #fff;
            width: 358px;
            height: 588px;
            border-radius: 15px;
            padding: 0 50px;
            position: relative;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
        .title {
            font-size: 38px;
            font-weight: bold;
            text-align: center;
            line-height: 200px;
        }
        .input-item {
            display: block;
            width: 100%;
            margin-bottom: 20px;
            border: 0;
            padding: 10px;
            border-bottom: 1px solid rgb(128, 125, 125);
            font-size: 15px;
            outline: none;
        }
        .input-item:placeholder {
            text-transform: uppercase;
        }
        .btn {
            text-align: center;
            padding: 10px;
            width: 100%;
            margin-top: 40px;
            background-image: linear-gradient(to right, #a6c1ee, #fbc2eb);
            color: #fff;
        }
        .msg {
            text-align: center;
            line-height: 88px;
        }
        a {
            text-decoration-line: none;
            color: #abc1ee;
        }
        .login-background{
               height: 100%;
         background-image: linear-gradient(to right, #fbc2eb, #a6c1ee);
        }
</style>